<template>
  <!-- 来料检任务清单 -->
  <p-card>
    <!-- 抽样SN明细编辑弹出框开始 -->
    <P-modal v-model="spotCheckModalVisible" title="SN明细" centered @ok="modalOk">
      <p-form-model
        ref="baseInfoData"
        :model="currentRow"
        :label-col="spotCheckLabelCol"
        :wrapper-col="spotCheckWrapperCol"
      >
        <p-form-model-item ref="key" label="key值" prop="key">
          <p-input v-model="currentRow.key" readonly />
        </p-form-model-item>
        <p-form-model-item ref="sn" label="SN" prop="sn">
          <p-input v-model="currentRow.sn" />
        </p-form-model-item>
        <p-form-model-item ref="inspectProject" label="检验项目" prop="inspectProject">
          <p-select v-model="currentRow.inspectProject" placeholder="please select your zone">
            <p-select-option
              v-for="(item,index) in inspectProjectOptions"
              :key="index"
              :value="item.value"
            >{{item.name}}</p-select-option>
          </p-select>
        </p-form-model-item>
        <p-form-model-item ref="photoUrl" label="图片" prop="photoUrl">
          <p-input type="text" placeholder="上传" readonly  v-model="currentRow.photoUrl" />
        </p-form-model-item>
        <p-form-model-item ref="remark" label="备注" prop="remark">
          <p-input v-model="currentRow.remark" />
        </p-form-model-item>
      </p-form-model>
    </P-modal>
    <!-- 抽样SN明细编辑弹出框结束 -->
    <!-- 抽样SN明细新增弹出框开始 -->
    <P-modal v-model="spotCheckModalVisible2" title="SN明细" centered @ok="addModalOk">
      <p-form-model
        ref="baseInfoData2"
        :model="addRow"
        :label-col="spotCheckLabelCol"
        :wrapper-col="spotCheckWrapperCol"
      >
        <p-form-model-item ref="key" label="key值" prop="key">
          <p-input v-model="addRow.key" readonly />
        </p-form-model-item>
        <p-form-model-item ref="sn" label="SN" prop="sn">
          <p-input v-model="addRow.sn" />
        </p-form-model-item>
        <p-form-model-item ref="inspectProject" label="检验项目" prop="inspectProject">
          <p-select v-model="addRow.inspectProject" placeholder="please select your zone">
            <p-select-option
              v-for="(item,index) in inspectProjectOptions"
              :key="index"
              :value="item.value"
            >{{item.name}}</p-select-option>
          </p-select>
        </p-form-model-item>
        <p-form-model-item ref="photoUrl" label="图片" prop="photoUrl">
          <p-input type="text" placeholder="上传" readonly v-model="addRow.photoUrl" />
        </p-form-model-item>
        <p-form-model-item ref="remark" label="备注" prop="remark">
          <p-input v-model="addRow.remark" />
        </p-form-model-item>
      </p-form-model>
    </P-modal>
    <!-- 抽样SN明细新增弹出框结束 -->
    <div>
      <p-alert message="基础信息" type="info" />
      <p-form-model
        ref="baseInfoData"
        :model="baseInfoData"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-row :gutter="24">
          <p-col :span="8">
            <p-form-model-item ref="inspectBillno" label="送检单号" prop="inspectBillno">
              <p-input
                v-model="baseInfoData.inspectBillno"
                @blur="
          () => {
            $refs.inspectBillno.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="processBillno" label="工序工单" prop="processBillno">
              <p-input
                v-model="baseInfoData.processBillno"
                @blur="
          () => {
            $refs.processBillno.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="mcode" label="产品编号" prop="mcode">
              <p-input
                v-model="baseInfoData.mcode"
                @blur="
          () => {
            $refs.mcode.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="mname" label="产品名称" prop="mname">
              <p-input
                v-model="baseInfoData.mname"
                @blur="
          () => {
            $refs.mname.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="processTwo" label="二级工序" prop="processTwo">
              <p-input
                v-model="baseInfoData.processTwo"
                @blur="
          () => {
            $refs.processTwo.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="linename" label="线体" prop="linename">
              <p-input
                v-model="baseInfoData.linename"
                @blur="
          () => {
            $refs.linename.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="sendTime" label="送检时间" prop="sendTime">
              <p-input
                v-model="baseInfoData.sendTime"
                @blur="
          () => {
            $refs.sendTime.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="simpleMethod" label="抽样方式" prop="simpleMethod">
              <p-input
                v-model="baseInfoData.simpleMethod"
                @blur="
          () => {
            $refs.simpleMethod.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="simpleQty" label="抽样数量" prop="simpleQty">
              <p-input
                v-model="baseInfoData.simpleQty"
                @blur="
          () => {
            $refs.simpleQty.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="inspecter" label="检验人" prop="inspecter">
              <p-input
                v-model="baseInfoData.inspecter"
                @blur="
          () => {
            $refs.inspecter.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="inspectTime" label="检验时间" prop="inspectTime">
              <p-input
                v-model="baseInfoData.inspectTime"
                @blur="
          () => {
            $refs.inspectTime.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="8">
            <p-form-model-item ref="sn" label="SN" prop="sn">
              <p-input
                v-model="baseInfoData.sn"
                @blur="
          () => {
            $refs.sn.onFieldBlur();
          }
        "
              />
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
      <p-alert message="抽检SN明细" type="info" />
      <p-button style="margin-top:10px" @click="spotCheckAdd">新增明细</p-button>
      <p-table
        :columns="spotCheckColumns"
        :data-source="spotCheckData"
        class="components-table-demo-nested"
        bordered
        style="margin-top:10px;"
      >
        <template slot="index" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
        <template slot="inspectProject" slot-scope="text,record,index">
          <p-select v-model="record.inspectProject" placeholder="please select your zone" disabled>
            <p-select-option
              v-for="(item,index) in inspectProjectOptions"
              :key="index"
              :value="item.value"
            >{{item.name}}</p-select-option>
          </p-select>
        </template>

        <template slot="edit" slot-scope="text,record">
          <p-button type="link" @click="spotCheckEdit(record)">编辑</p-button>
        </template>
        <template slot="delete" slot-scope="text,record">
          <p-popconfirm
            title="是否删除当前数据"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(record)"
            @cancel="cancel"
          >
            <a href="#">删除</a>
          </p-popconfirm>
        </template>
      </p-table>

      <p-alert message="检验项目" type="info" />
      <p-table
        :columns="inspectionItemsColumns"
        :data-source="inspectionItemsData"
        class="components-table-demo-nested"
        bordered
        style="margin-top:10px;"
      >
        <template slot="index" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
        <template slot="measuredValue" slot-scope="text,record">
          <p-select v-model="record.measuredValue" placeholder="please select your zone">
            <p-select-option
              v-for="(item,index) in measuredValueOptions"
              :key="index"
              :value="item.value"
            >{{item.name}}</p-select-option>
          </p-select>
        </template>
      </p-table>
      <p-alert message="质量判定" type="info" />

      <p-form-model
        ref="processProcessingData"
        :label-col="{span:2}"
        :wrapper-col="{span:12}"
        :model="baseInfoData"
        style="margin-top:12px;"
      >
        <p-row :gutter="24">
          <p-col :span="24">
            <p-form-model-item ref="inspectResult" label="检验结论" prop="inspectResult">
              <p-select v-model="baseInfoData.inspectResult" placeholder="please select your zone">
                <p-select-option
                  v-for="(item,index) in inspectResultOptions"
                  :key="index"
                  :value="item.value"
                >{{item.name}}</p-select-option>
              </p-select>
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
      <p-button type="primary">提交</p-button>
    </div>
  </p-card>
</template>

<script>
export default {
  name: "Operation1",
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      baseInfoData: {
        //基础信息
        inspectBillno: "001", //送检单号
        processBillno: "", //工序工单
        mcode: "001", //产品编号
        mname: "", //产品名称
        processTwo: "", //二级工序
        linename: "", //线体
        sendTime: "", //送检时间
        simpleMethod: "", //抽样方式
        simpleQty: "3", //抽样数量
        inspecter: "", //检验人
        inspectTime: "", //检验时间
        sn: "", //sn
        inspectResult: 1,
      },
      rules: {
        inspectBillno: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        processBillno: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        mcode: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        mname: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        processTwo: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        linename: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        sendTime: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        simpleMethod: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        simpleQty: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        inspecter: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        inspectTime: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        sn: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
      },
      //抽检SN明细
      spotCheckColumns: [
        {
          title: "序号",
          scopedSlots: { customRender: "index" },
        },
        { title: "SN", dataIndex: "sn", key: "sn" },
        {
          title: "检验项目",
          dataIndex: "inspectProject",
          key: "inspectProject",
          scopedSlots: { customRender: "inspectProject" },
        },
        { title: "图片", dataIndex: "photoUrl", key: "photoUrl" },
        { title: "备注", dataIndex: "remark", key: "remark" },
        {
          title: "编辑",
          dataIndex: "edit",
          key: "edit",
          scopedSlots: { customRender: "edit" },
        },
        {
          title: "删除",
          dataIndex: "delete",
          key: "delete",
          scopedSlots: { customRender: "delete" },
        },
      ],
      spotCheckData: [
        {
          key: 1,
          sn: "123456",
          inspectProject: 1,
          photoUrl: "",
          remark: "",
        },
        {
          key: 2,
          sn: "123456",
          inspectProject: 2,
          photoUrl: "",
          remark: "",
        },
      ],
      inspectProjectOptions: [
        { name: "空", value: 0 },
        { name: "包装", value: 1 },
        { name: "外观", value: 2 },
      ],
      currentRow: {},
      addRow: {},
      spotCheckModalVisible: false,
      spotCheckModalVisible2: false,
      spotCheckLabelCol: { span: 5 },
      spotCheckWrapperCol: { span: 18 },
      // 检验项目数据
      inspectionItemsColumns: [
        {
          title: "序号",
          dataIndex: "index",
          scopedSlots: { customRender: "index" },
        },
        { title: "工站", dataIndex: "workStation", key: "workStation" },
        {
          title: "检验项目",
          dataIndex: "inspectProject",
          key: "inspectProject",
        },
        {
          title: "检验标准",
          dataIndex: "inpectStandard",
          key: "inpectStandard",
        },
        { title: "值类型", dataIndex: "valueType", key: "valueType" },
        { title: "检验手段", dataIndex: "inspectMethod", key: "inspectMethod" },
        { title: "标准值", dataIndex: "standardValue", key: "standardValue" },
        { title: "上限值", dataIndex: "upperValue", key: "upperValue" },
        { title: "下限值", dataIndex: "downValue", key: "downValue" },
        {
          title: "实测值",
          dataIndex: "measuredValue",
          key: "measuredValue",
          scopedSlots: { customRender: "measuredValue" },
        },
        {
          title: "单项判定",
          dataIndex: "individualJudgment",
          key: "individualJudgment",
        },
      ],
      inspectionItemsData: [
        {
          key: 1,
          workStation: "包装",
          inspectProject: "外箱包装",
          inpectStandard: "包装箱外观质量良好（无破损、污垢）",
          valueType: "计数型",
          inspectMethod: "目测",
          standardValue: "PASS",
          upperValue: "",
          downValue: "",
          measuredValue: 1,
          individualJudgment: "Pass",
        },
        {
          key: 2,
          workStation: "包装",
          inspectProject: "外箱包装",
          inpectStandard: "包装箱外观质量良好（无破损、污垢）",
          valueType: "计数型",
          inspectMethod: "目测",
          standardValue: "PASS",
          upperValue: "",
          downValue: "",
          measuredValue: 1,
          individualJudgment: "Pass",
        },
      ],
      measuredValueOptions: [
        {
          name: "pass",
          value: 1,
        },
        {
          name: "NG",
          value: 0,
        },
      ],
      defectLevelOptions: [
        { name: "空", value: 0 },
        { name: "A", value: 1 },
      ],
      inspectResultOptions: [
        { name: "不合格", value: 0 },
        { name: "合格", value: 1 },
      ],
    };
  },
  computed: {},

  created() {},

  methods: {
    spotCheckEdit(record) {
      // console.log("spotCheckEdit", record);
      this.spotCheckModalVisible = true;
      this.currentRow = JSON.parse(JSON.stringify(record));
    },
    confirm(record) {
      //删除抽检SN明细
      console.log(record);
      this.spotCheckData.forEach((item, index, arr) => {
        if (item.key == record.key) {
          arr.splice(index, 1);
          console.log(arr);
        }
      });
      this.$message.success("删除成功");
    },
    cancel(record) {
      this.$message.error("取消删除当前数据");
    },
    spotCheckDelete(record) {
      // console.log("spotCheckDelete", scope);
    },
    modalOk() {
      this.spotCheckData.forEach((item, index, arr) => {
        if (item.key == this.currentRow.key) {
          console.log("currentRow", this.currentRow, item);
          this.spotCheckData.splice(
            index,
            1,
            (item = JSON.parse(JSON.stringify(this.currentRow)))
          );
        }
      });

      this.spotCheckModalVisible = false;
    },
    //新增明细
    spotCheckAdd() {
      this.spotCheckModalVisible2 = true;
      let key = 0;
      this.spotCheckData.forEach((item) => {
        if (item.key > key) {
          key = item.key;
        }
      });
      this.addRow = {
        key: key + 1,
        sn: "",
        inspectProject: 0,
        photoUrl: "",
        remark: "",
      };
    },
    addModalOk() {
      this.spotCheckData.push(JSON.parse(JSON.stringify(this.addRow)));
      this.spotCheckModalVisible2 = false;
    },
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
.title {
  padding: 8px 12px;
  background: #fafafa;
}
.title:not(:first-child) {
  margin-top: 10px;
}
/deep/ .poros-form {
  margin-top: 15px;
}
/deep/ .poros-table-body {
  overflow-x: auto !important;
}
/deep/ .poros-col {
  min-height: 54px;
}
/deep/ .poros-table thead th {
  height: 44px;
}
</style>
